<template>
  <view class="pay-method-page">
    <view class="header-bar">
      <text class="title">支付方式列表</text>
      <button v-if="hasPermission" class="add-btn" @click="openAddPopup">
        <uni-icons class="add-icon" type="plusempty" size="32" color="#fff" /> 添加
      </button>
    </view>
    <scroll-view class="pay-list" scroll-y>
      <view v-for="item in payMethods" :key="item.id" class="pay-item">
        <view class="pay-info">
          <view class="pay-id">#{{ item.id }}</view>
          <view class="pay-name">{{ item.name }}</view>
          <view class="pay-desc" :title="item.description">{{ item.description || '-' }}</view>
        </view>
        <view v-if="hasPermission" class="pay-actions">
          <button class="action-btn edit-btn" @click="openEditPopup(item)">
            <uni-icons class="icon" type="compose" size="24" color="#ffb86c" /> 编辑
          </button>
          <button class="action-btn delete-btn" @click="showDeleteMsgBox(item)">
            <uni-icons class="icon" type="trash" size="24" color="#ea5455" /> 删除
          </button>
        </view>
      </view>
      <view v-if="payMethods.length === 0" class="empty-state">
        <uni-icons type="folder-opened" size="60" color="#e0e0e0" />
        <text class="empty-text">暂无支付方式</text>
      </view>
    </scroll-view>

    <!-- 添加/编辑弹窗 -->
    <uni-popup ref="payPopup" type="center">
      <view class="pay-modal">
        <view class="modal-header">
          <text class="modal-title">{{ isEdit ? '编辑' : '添加' }}支付方式</text>
          <text class="modal-close" @click="closePayPopup">×</text>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="label">名称</text>
            <input class="input" v-model="form.name" maxlength="20" placeholder="请输入名称" />
          </view>
          <view class="form-item">
            <text class="label">描述</text>
            <input class="input" v-model="form.description" placeholder="请输入描述" />
          </view>
        </view>
        <view class="modal-footer">
          <button class="cancel-btn" @click="closePayPopup">取消</button>
          <button class="confirm-btn" @click="submitPayMethod">{{ isEdit ? '保存' : '添加' }}</button>
        </view>
      </view>
    </uni-popup>

    <!-- 删除消息框 -->
    <message-box
      v-model="deleteMsgBoxVisible"
      title="确认删除"
      content="确定要删除这个支付方式吗？"
      :show-cancel="true"
      confirm-text="删除"
      cancel-text="取消"
      @confirm="onDeletePayMethodConfirm"
    />
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { IntranetConfig, UserConfig } from '@/static/js/config'
import MessageBox from '@/components/message-box/message-box.vue'

// 获取当前用户信息
const userInfo = computed(() => UserConfig.getUserInfo())

// 检查用户权限
const hasPermission = computed(() => {
  return userInfo.value.is_superuser === 1 || userInfo.value.is_superuser === 2
})

// 自定义toast提示
function showToast(title, type = 'none') {
  uni.showToast({
    title,
    icon: type,
    duration: 2000
  })
}

const payMethods = ref([])
const payPopup = ref(null)
const isEdit = ref(false)
const form = ref({ id: '', name: '', description: '' })
const deleteMsgBoxVisible = ref(false)
let payMethodToDelete = null

// 获取支付方式列表
async function getPayMethodList() {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/order/get_pay_method_list/',
      method: 'GET',
      header: IntranetConfig.headers
    })
    if (res.data.code === 200) {
      payMethods.value = res.data.data
    } else {
      payMethods.value = []
      showToast(res.data.msg || '获取失败', 'error')
    }
  } catch (error) {
    payMethods.value = []
    showToast('获取失败', 'error')
  }
}

function openAddPopup() {
  if (!hasPermission.value) {
    showToast('您没有权限添加支付方式', 'error')
    return
  }
  isEdit.value = false
  form.value = { id: '', name: '', description: '' }
  payPopup.value.open()
}

function openEditPopup(item) {
  if (!hasPermission.value) {
    showToast('您没有权限编辑支付方式', 'error')
    return
  }
  isEdit.value = true
  form.value = { id: item.id, name: item.name, description: item.description }
  payPopup.value.open()
}

function closePayPopup() {
  payPopup.value.close()
}

async function submitPayMethod() {
  if (!hasPermission.value) {
    showToast('您没有权限操作', 'error')
    return
  }

  if (!form.value.name) {
    showToast('请输入名称', 'none')
    return
  }
  if (form.value.name.length > 20) {
    showToast('名称不能超过20字符', 'none')
    return
  }

  uni.showLoading({ title: isEdit.value ? '保存中...' : '添加中...' })
  try {
    let url = '', method = '', data = {}
    if (isEdit.value) {
      url = IntranetConfig.domain + `api/order/update_pay_method/${form.value.id}/`
      method = 'POST'
      data = { name: form.value.name, description: form.value.description }
    } else {
      url = IntranetConfig.domain + 'api/order/create_pay_method/'
      method = 'POST'
      data = { name: form.value.name, description: form.value.description }
    }
    const res = await uni.request({ url, method, header: IntranetConfig.headers, data })
    if (res.data.code === 200) {
      showToast(isEdit.value ? '保存成功' : '添加成功', 'success')
      closePayPopup()
      getPayMethodList()
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showToast(error.message || '操作失败', 'error')
  } finally {
    uni.hideLoading()
  }
}

function showDeleteMsgBox(item) {
  if (!hasPermission.value) {
    showToast('您没有权限删除支付方式', 'error')
    return
  }
  payMethodToDelete = item
  deleteMsgBoxVisible.value = true
}

async function onDeletePayMethodConfirm() {
  if (!payMethodToDelete) return
  if (!hasPermission.value) {
    showToast('您没有权限删除支付方式', 'error')
    return
  }

  try {
    const res = await uni.request({
      url: IntranetConfig.domain + `api/order/delete_pay_method/${payMethodToDelete.id}/`,
      method: 'DELETE',
      header: IntranetConfig.headers
    })
    if (res.data.code === 200) {
      showToast('删除成功', 'success')
      getPayMethodList()
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showToast(error.message || '删除失败', 'error')
  } finally {
    deleteMsgBoxVisible.value = false
    payMethodToDelete = null
  }
}

onMounted(() => {
  getPayMethodList()
})
</script>

<style lang="scss" scoped>
.pay-method-page, .pay-list {
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}
.pay-method-page {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 40rpx 0 40rpx;
  .title {
    font-size: 40rpx;
    font-weight: 700;
    color: #222;
    letter-spacing: 1rpx;
  }
  .add-btn {
    background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
    color: #fff;
    border: none;
    border-radius: 22rpx;
    font-size: 32rpx;
    padding: 0 56rpx;
    height: 80rpx;
    font-weight: 700;
    box-shadow: 0 4rpx 16rpx rgba(255,126,45,0.12);
    display: flex;
    align-items: center;
    gap: 12rpx;
    transition: background 0.2s, box-shadow 0.2s;
    &:active {
      background: #ff7e2d;
      box-shadow: 0 2rpx 8rpx rgba(255,126,45,0.18);
    }
    .add-icon {
      font-size: 38rpx;
      margin-right: 2rpx;
    }
  }
}
.pay-list {
  margin: 40rpx 32rpx 0 32rpx;
  background: #fff;
  border-radius: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(255,126,45,0.08);
  padding: 0 0 8rpx 0;
  min-height: 300rpx;
  max-height: 70vh;
  width: calc(100vw - 64rpx);
  box-sizing: border-box;
}
.pay-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1rpx solid #f5f5f5;
  padding: 40rpx 32rpx 0 32rpx;
  transition: background-color 0.2s;
  width: 100%;
  box-sizing: border-box;
  
  &:hover {
    background-color: #fafafa;
  }
  
  &:last-child {
    border-bottom: none;
  }
  
  .pay-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    min-width: 0;
    
    .pay-id {
      font-size: 26rpx;
      color: #bbb;
      margin-bottom: 2rpx;
    }
    
    .pay-name {
      font-size: 36rpx;
      font-weight: 700;
      color: #333;
      margin-bottom: 2rpx;
      background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .pay-desc {
      font-size: 28rpx;
      color: #888;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  .pay-actions {
    display: flex;
    flex-direction: column;
    gap: 18rpx;
    margin-left: 24rpx;
    flex-shrink: 0;
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: 8rpx;
      border: none;
      border-radius: 20rpx;
      font-size: 28rpx;
      padding: 0 24rpx;
      height: 60rpx;
      font-weight: 600;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
      transition: all 0.2s;
      white-space: nowrap;
      
      &:active {
        transform: scale(0.98);
      }
    }
    
    .edit-btn {
      background: #fff3e0;
      color: #ff7e2d;
      
      &:active {
        background: #ffe0b2;
      }
      
      .icon {
        font-size: 32rpx;
        color: #ffb86c;
      }
    }
    
    .delete-btn {
      background: #ffe4e4;
      color: #ea5455;
      
      &:active {
        background: #ffd6d6;
      }
      
      .icon {
        font-size: 32rpx;
        color: #ea5455;
      }
    }
  }
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 160rpx 0 80rpx 0;
  
  .empty-text {
    margin-top: 24rpx;
    font-size: 28rpx;
    color: #bbb;
  }
}
.pay-modal {
  width: 92vw;
  max-width: 640rpx;
  background: #fff;
  border-radius: 36rpx;
  box-shadow: 0 12rpx 48rpx rgba(255,126,45,0.13);
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 40rpx 0 40rpx;
  .modal-title {
    font-size: 38rpx;
    font-weight: 700;
    color: #333;
  }
  .modal-close {
    font-size: 48rpx;
    color: #bbb;
    padding: 10rpx;
    border-radius: 50%;
    transition: background 0.2s;
    &:active {
      background: #f5f5f5;
    }
  }
}
.modal-body {
  padding: 32rpx 40rpx 0 40rpx;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  font-size: 32rpx;
  .label {
    color: #333;
    width: 180rpx;
    font-weight: 600;
    flex-shrink: 0;
  }
  .input {
    flex: 1;
    border: none;
    background: #f8f9fa;
    border-radius: 14rpx;
    padding: 20rpx 28rpx;
    font-size: 32rpx;
    color: #333;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
    transition: box-shadow 0.2s;
    &:focus {
      box-shadow: 0 4rpx 16rpx rgba(255,126,45,0.08);
      outline: none;
    }
  }
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 32rpx;
  padding: 40rpx;
  border-top: 1rpx solid #f5f5f5;
  background: #fff;
  .cancel-btn {
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 16rpx;
    font-size: 32rpx;
    padding: 0 56rpx;
    height: 80rpx;
    font-weight: 500;
    transition: background 0.2s;
    &:active {
      background: #e0e0e0;
    }
  }
  .confirm-btn {
    background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
    color: #fff;
    border: none;
    border-radius: 16rpx;
    font-size: 32rpx;
    padding: 0 56rpx;
    height: 80rpx;
    font-weight: 700;
    transition: background 0.2s;
    &:active {
      background: #ff7e2d;
    }
  }
}
</style>
